import React, { useState } from 'react';
import { Form, message, Modal, Select } from 'antd';
import request from '@/utils/request';
import Request from 'umi-request';

import { debounce, uniqBy } from 'lodash';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 }
};

const { Option } = Select;

const DesignateModal = ({ form, visible, taskDefinitionKey, taskId, processInstanceId, onOk, onCancel, ...props }) => {
    const [datailloading, setDetailLoading] = useState(false);
    const [nameList, setNameList] = useState([]);
    const existRequest = React.useRef();

    // 搜索员工姓名
    const handleOnSearchName = React.useRef(
        debounce(async name => {
            if (existRequest.current) existRequest.current();
            const { token, cancel } = Request.CancelToken.source();
            existRequest.current = cancel;

            const { code, data } = await request(
                `/api/uc/approve/v1/employee/detail/info/not/quiting/list?name=${name}`,
                {
                    method: 'GET',
                    cancelToken: token
                }
            );
            if (code === 10000) {
                const c = data.map(v => ({
                    ...v,
                    label: v.employeeName,
                    value: v.employeeCode
                }));
                setNameList(uniqBy(c, 'value'));
            }
        }, 300)
    );

    const handleOnOk = close => {
        form.validateFields(async (err, values) => {
            if (!err) {
                const {
                    employeeCode: { key, label }
                } = values;
                // 补充modal的confirmLoading属性
                setDetailLoading(true);
                const response = await request('/api/workflowweb/approve/v1/designate', {
                    method: 'POST',
                    data: {
                        processInstanceId,
                        taskDefinitionKey,
                        taskId,
                        employeeCode: key,
                        employeeName: label
                    }
                });
                if (response.code === 10000) {
                    message.success('操作成功！');
                    form.resetFields();
                    if (onOk) {
                        onOk(close);
                    }
                } else {
                    message.error(response.msg);
                    form.resetFields();
                }
                // 关闭模态框
                // setVisible(false);
                setDetailLoading(false);
            }
        });
    };
    return (
        <Modal
            title="流程指派"
            visible={visible}
            confirmLoading={datailloading}
            onOk={handleOnOk}
            onCancel={onCancel}
            {...props}
        >
            <Form layout="horizontal" {...formItemLayout}>
                <Form.Item label="指派对象">
                    {form.getFieldDecorator('employeeCode', {
                        rules: [{ required: true, message: '请选择指派对象' }]
                    })(
                        <Select
                            labelInValue
                            allowClear
                            showSearch
                            defaultActiveFirstOption={false}
                            showArrow={false}
                            filterOption={false}
                            notFoundContent={null}
                            onSearch={handleOnSearchName.current}
                        >
                            {nameList.map(o => (
                                <Option key={o.value} value={o.value} title={o.label}>
                                    {o.label}
                                </Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create()(DesignateModal);
